<template>
  <div class="table-wrap">
    <div class="table-search flex flex-row">
      <div class="search-wrap">
        <div class="item-wrap">
          <div class="search-item">
            <span class="search-item-prefix">院校查询</span>
            <Input placeholder="输入关键词查询" v-model:value="pageRequest.search!.keyword" allowClear></Input>
          </div>
          <div class="search-item">
            <span class="search-item-prefix">办学类型</span>
            <Select v-model:value="pageRequest.search!.nature" placeholder="请选择办学类型" allowClear style="width: 200px;">
              <Option v-for="item in SchoolNatureOption" :key="item.value" :value="item.value">{{ item.label }}
              </Option>
            </Select>
          </div>
          <div class="search-item">
            <span class="search-item-prefix">院校特色</span>
            <Select v-model:value="pageRequest.search!.featureIds" placeholder="请选择院校特色" allowClear
              style="width: 200px;" mode="multiple">
              <Option v-for="item in SchoolFeatureOptions" :key="item.value" :value="item.value">{{ item.label }}
              </Option>
            </Select>
          </div>
          <div class="search-item">
            <span class="search-item-prefix">院校状态</span>
            <Select v-model:value="pageRequest.search!.state" placeholder="请选择院校状态" allowClear style="width: 200px;">
              <Option v-for="item in SchoolStateOptions" :key="item.value" :value="item.value">{{ item.label }}
              </Option>
            </Select>
          </div>
        </div>
        <div class="search-btn">
          <Button type="primary" class="!flex flex-row items-center" @click="getSchoolList">
            <template #icon>
              <SearchOutlined class="!flex" />
            </template>查询
          </Button>
          <Button type="default" @click="handleReset">重置</Button>
        </div>
      </div>
    </div>
    <div class="table-content">
      <div class="table-add-btn">
        <span>共{{ accountDatasource && accountDatasource.count }}个院校</span>
        <Button type="primary" @click="handleAdd" class="!flex flex-row items-center">
          <template #icon>
            <PlusOutlined class="!flex" />
          </template>添加院校</Button>
      </div>
      <Table :columns="pageColumns" :data-source="accountDatasource && accountDatasource.items" :pagination="{
        pageSize: pageRequest.page!.pageSize,
        total: accountDatasource?.count,
        pageSizeOptions: pageSizeOptions,
        showSizeChanger: true,
      }" row-key="id" :loading="loading" @change="onChange">
        <template #bodyCell="{ column, record }">

          <template v-if="column.key === 'byName'">
            <div> {{ record.byName || '--' }} </div>
          </template>

          <template v-if="column.key === 'nature'">
            <div> {{ record.nature || '--' }} </div>
          </template>

          <template v-if="column.key === 'feature'">
            <div class="text-[#333]">{{ record.feature || '--' }}</div>
          </template>

          <template v-if="column.key === 'level'">
            <span>{{ record.levelJson?.name || '--' }}</span>
          </template>

          <template v-if="column.key === 'state'">
            <span>{{ record.stateJson?.name || '--' }}</span>
          </template>

          <template v-if="column.key === 'action'">
            <Button class="!px-0 !mr-6" type="link" @click="editUser(record.id)">编辑</Button>
            <Popconfirm :title="`确定${record.state === 0 ? '下架' : '上架'}该院校吗?`" ok-text="确定" cancel-text="取消"
              @confirm="handleUpDownListing(record)">
              <Button class="!px-0 !mr-6" type="link">
                {{ record.state === 0 ? '下架' : '上架' }}
              </Button>
            </Popconfirm>
          </template>

        </template>
      </Table>
    </div>
    <AddSchoolModal ref="addRef" @ok="getSchoolList" />
  </div>
</template>

<script lang="ts" setup name="Tags">
import { ref } from 'vue'
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { pageColumns, SchoolNatureOption, SchoolFeatureOptions, SchoolStateOptions } from './index'
import { Input, Select, Button, Table, Popconfirm, message } from 'ant-design-vue'
import AddSchoolModal from './addSchoolModal.vue'
import {
  SchoolApi,
  SchoolQueryParamsPageSearchRequest,
  SchoolItemPageListModel,
  SchoolItem,
  EnumSchoolState
} from '@/api'

const { Option } = Select;

const loading = ref(false)
const pageRequest = reactive<SchoolQueryParamsPageSearchRequest>({
  page: {
    pageIndex: 1,
    pageSize: 20,
  },
  search: {},
  sort: {
    field: '',
    reverse: true,
  },
});
const pageSizeOptions = ref<string[]>(['5', '10', '20', '50', '100']);
const accountDatasource = ref<SchoolItemPageListModel>()

// 添加院校
const addRef = ref();

function handleReset() {
  pageRequest.search = {}
  getSchoolList();
}
const getSchoolList = async () => {
  loading.value = true;
  try {
    let res = await SchoolApi.schoolList(pageRequest);
    accountDatasource.value = res;
  } catch (error) {

  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  getSchoolList();
})


// 添加院校
function handleAdd() {
  addRef.value.handleOpen();
}

const editUser = (id: number) => {
  addRef.value.handleOpen(id.toString());
}

// 上下架
async function handleUpDownListing(data: SchoolItem) {
  loading.value = true;
  try {
    if (data.state === 0) {
      // 下架
      await SchoolApi.schoolState(data.id!.toString(), { state: EnumSchoolState.下架 });
      message.success('下架成功')
    } else {
      // 上架
      await SchoolApi.schoolState(data.id!.toString(), { state: EnumSchoolState.正常 });
      message.success('上架成功')
    }
    getSchoolList();
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
}

function onChange(pagination: any, filters: any, sorter: any) {
  pageRequest.page!.pageIndex = pagination.current;
  pageRequest.page!.pageSize = pagination.pageSize;

  pageRequest.sort!.field = sorter.order ? sorter.field : '';
  pageRequest.sort!.reverse = sorter.order == 'descend';
  getSchoolList();
}
</script>

<style lang="less" scoped></style>